<template>
  <FormItem v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <InputUser
        :id="id"
        :user-query-params="userQueryParams"
        :class="{ 'is-readonly': readonly }"
        :value="users"
        :name="name"
        :node-id="nodeId"
        :disabled-ids="disabledIds"
        :clearable="clearable"
        :multiple="multiple"
        :readonly="readonly"
        :disabled="inputDisabled"
        :placeholder="computePlaceholder"
        :is-user-check="isUserCheck"
        v-bind="inputProps"
        v-on="listeners"
        @update:id="val => $emit('update:id', val)"
        @update:name="val => $emit('update:name', val)"
        @input="emitInput">
        <template #multiple="{ showPicker }">
          <slot name="multiple" :users="users" :show-picker="showPicker">
            <ElInput
              v-if="!tagStyle"
              :placeholder="computePlaceholder"
              readonly
              :disabled="inputDisabled"
              suffix-icon="el-icon-search"
              :value="users.map(v => v.name).join('、')"
              @click.native="showPicker()" />
          </slot>
        </template>
        <template #single="{ id: userId, userName, showPicker }">
          <slot :id="userId" name="single" :user-name="userName" :show-picker="showPicker"></slot>
        </template>
      </InputUser>
    </template>
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import formPick from '@/components/form/form-pick'
  import InputUser from '@/components/organize/user/InputUser'
  import { filterProperties, normalizeProps } from '@/util'

  const autoBindKeys = Object.keys(InputUser.props).filter(key => !['value', 'placeholder', 'disabled'].includes(key))

  export default {
    name: 'FormInputUser',
    mixins: [formInput, formPick],
    props: {
      id: [Number, String],
      name: String,
      value: Array,
      multiple: Boolean,
      tagStyle: Boolean,
      clearable: Boolean,
      getConvertor: Function,
      setConvertor: Function,
      nodeId: {
        type: [Number, String],
        default: -1
      },
      isUserCheck: {
        type: Boolean,
        default: false
      },
      userQueryParams: {
        type: Object,
        default() {
          return { ouFullCode: null, ignore: false }
        }
      },
      disabledIds: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      prefix() {
        return '请选择'
      },
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      },
      users() {
        if (!this.getConvertor) {
          return this.value || []
        }
        if (this.value?.length) {
          return this.value.map(this.getConvertor)
        } else {
          return []
        }
      }
    },
    methods: {
      emitInput(users) {
        if (!this.setConvertor) {
          this.$emit('input', users)
          return
        }
        const val = users.map(this.setConvertor)
        this.$emit('input', val)
      }
    }
  }
</script>
